$(function () {
  // ---------------  创建剪裁区 ------------------
  // - 找到剪裁区的图片 （img#image）
  let $image = $("#image")
  // - 设置配置项
  let option = {
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: ".img-preview", // 指定预览区的类名（选择器）
  }
  // - 调用cropper方法，创建剪裁区
  $image.cropper(option)

  // 1.选择图片
  $("#upload").on("click", function () {
    $("#chooseImg").click()
  })

  // 2.更换裁剪区的照片
  $("#chooseImg").on("change", function () {
    if (this.files.length > 0) {
      // 3.1 找到文件对象
      // console.dir(this);
      var fileObj = this.files[0]
      // 3.2 为文件对象创建临时的url
      var url = URL.createObjectURL(fileObj)
      // console.log(url);
      // 3.3 更换剪裁区的图片(销毁剪裁框 --> 更换图片 --> 重新生成剪裁框)
      $image.cropper("replace", url)
    }
  })

  // 3.点击确定，更换头像
  $("#confirm").on("click", function () {
    // 1. 剪裁图片，得到canvas
    var canvas = $image.cropper("getCroppedCanvas", { width: 30, height: 30 })
    // 2. 把canvas转成base64格式字符串
    var base64 = canvas.toDataURL()
    // 3.发送请求
    axios({
      method: "post",
      url: "/my/update/avatar",
      data: "avatar=" + encodeURIComponent(base64),
    }).then(({ data: res }) => {
      //  失败提示
      if (res.status != 0) {
        return layer.msg(res.message)
      }
      // 成功提示
      layer.msg("恭喜您！修改成功")
      // 更新用户头像
      window.parent.getUserInfo()
    })
  })
})
